<template>
  <div id="print-content" class="sports-exam-container">
    <h1>2025年株洲体育中考</h1>

    <div class="group-header">
      <h2>{{ students[0].schoolName }}第{{ students[0].groupNo }}组</h2>
    </div>

    <div class="table-container">
      <table class="exam-table">
        <thead>
        <tr>
          <th>序号</th>
          <th>准考证号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>选测项目1</th>
          <th>选测项目1成绩</th>
          <th>选测项目2</th>
          <th>选测项目2成绩</th>
          <th>考生签名</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(student, index) in students" :key="student.id">
          <td>{{ student.trackNo }}</td>
          <td>{{ student.studentCode }}</td>
          <td>{{ student.studentName }}</td>
          <td><span v-if="student.gender===0">男</span><span v-if="student.gender===1">女</span></td>
          <td>{{ student.xcxm1 }}</td>
          <td>{{ student.xcxm1Result }}</td>
          <td>{{ student.xcxm2 }}</td>
          <td>{{ student.xcxm2Result }}</td>
          <td>{{ student.signature }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="footer">
      <p>{{dateTimes}}</p>
    </div>

    <div class="action-bar">
      <el-button type="primary" @click="printTable">打印成绩表</el-button>
    </div>
  </div>
</template>

<script>

import {printResult} from "@/api/students";

export default {
  data() {
    return {
      students: [],
      dateTimes:null
    }
  },
  created() {
    this.formatDate()
    this.getList()
  },
  methods: {
    // 在你的 Vue 组件 methods 或 computed 中
    formatDate() {
      const date = new Date(); // 当前日期
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      this.dateTimes= `${year}年${month}月${day}日`;
    },
    getList() {
      console.log(this.$route.query.studentCodes)
      console.log(this.$route.query.groupNo)
      const data = {
        studentCodes: this.$route.query.studentCodes,
        groupNo: this.$route.query.groupNo
      }
      printResult(data).then(response => {
        if (200 === response.code) {
          this.students = response.data
          this.$message.success(response.msg);
        } else {
          this.$message.warning(response.msg);
        }
      }).finally(() => {
          }
      )
    },
    printTable() {
      // 创建打印窗口
      const printWindow = window.open('', '_blank')

      // 获取打印内容
      const printContent = document.getElementById('print-content').innerHTML

      // 构建打印页面
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>体育中考成绩表</title>
          <meta charset="UTF-8">
          <style>
            @page {
              size: A4 portrait;
              margin: 1cm;
            }
            body {
              font-family: 'Microsoft YaHei', sans-serif;
              width: 210mm;
              margin: 0 auto;
              padding: 10mm;
            }
            h1 {
              text-align: center;
              font-size: 18pt;
              margin-bottom: 10mm;
            }
            h2 {
              text-align: center;
              font-size: 16pt;
              margin-bottom: 8mm;
            }
            table {
              width: 100%;
              border-collapse: collapse;
              font-size: 10pt;
              margin-bottom: 15mm;
            }
            th, td {
              border: 1px solid #000;
              padding: 2mm;
              text-align: center;
            }
            th {
              background-color: #f2f2f2;
              font-weight: bold;
            }
            .footer {
              text-align: right;
              margin-top: 10mm;
              font-size: 10pt;
            }
            .signature-cell {
              min-width: 30mm;
            }
            /* 隐藏不需要打印的元素 */
            .action-bar {
                display: none !important;
            }
            .group-header {
                text-align: left; !important;
                margin-bottom: 20px; !important;
            }
            @media print {
              .no-print {
                display: none;
              }
            }
          </style>
        </head>
        <body>
          ${printContent}
          <script>
            window.onload = function() {
              setTimeout(function() {
                window.print();
                window.close();
              }, 200);
            }
          <\/script>
        </body>
        </html>
      `)
      printWindow.document.close()
    }
  }
}
</script>

<style scoped>
.sports-exam-container {
  font-family: 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.group-header {
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  color: #444;
}

.table-container {
  overflow-x: auto;
}

.exam-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.exam-table th, .exam-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.exam-table th {
  font-weight: bold;
}

.exam-table tr:nth-child(even) {
  background-color: white;
}

.exam-table tr:hover {
  background-color: white;
}

.exam-table input {
  width: 60px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-align: center;
}

.footer {
  text-align: right;
  margin-top: 20px;
  color: #666;
}

.action-bar {
  margin-bottom: 20px;
  text-align: right;
}

@media print {
  .action-bar {
    display: none;
  }

  .print-content {
    padding: 0;
    box-shadow: none;
  }

  .group-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .action-bar {
    display: none !important;
  }
}
</style>